<template>
  <div>
    <div class="tip">
      <p>Hi：{{ capitalize(user.username) }} , {{ noticeTip }}, 今天是 <span>{{ nowTime }}</span>。祝您撸码愉快！！！</p>
    </div>

    <div class="el-card" style="margin: 20px 10px;background-color: #ecf8ff;border-left: 5px solid #50bfff;">
      <div class="el-card__header">
        <div class="clearfix" style="font-weight: 600;"><span data-v-1ba8f0a0="">vue、vue-element-admin开发小而完整的个人管理系统实战</span>
        </div>
      </div>
      <div class="el-card__body">
        <div>项目内容：</div>
        <div style="margin-top: 15px;">
          本次项目主要选用第三方框架vue-element-admin，且前后端完全分离的开发方式进行开发。项目开发中包括管理员登录流程、权限验证流程的实现、token验证等;初期以一个药品商城为基础加上权限管理，后期可以在此系统上进行功能的扩展开发;
        </div>
        <div style="margin-top: 15px;">
          所有功能模块的接口均使用 node.js 语言编写，源码已上传至码云个人仓库。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { capitalize } from '@/utils/common'

export default {
  name: 'Dashboard',
  data() {
    return {
      user: {},
      noticeTip: '',
      nowTime: ''
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    this.nowTimes()
  },
  created() {
    this.user = JSON.parse(localStorage.user)
    this.showDate()
  },
  methods: {
    capitalize,
    // 问候语
    showDate() {
      const date = new Date()
      if (date.getHours() >= 0 && date.getHours() < 6) {
        this.noticeTip = '夜深了，请注意休息！'
      } else if (date.getHours() >= 6 && date.getHours() < 12) {
        this.noticeTip = '上午好！'
      } else if (date.getHours() >= 12 && date.getHours() < 13) {
        this.noticeTip = '中午好！'
      } else if (date.getHours() >= 13 && date.getHours() < 18) {
        this.noticeTip = '下午好！'
      } else {
        this.noticeTip = '晚上好！'
      }
    },
    // 日期时间
    timeFormate(timeStamp) {
      const year = new Date(timeStamp).getFullYear()
      const month = new Date(timeStamp).getMonth() + 1 < 10 ? '0' + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1
      const date = new Date(timeStamp).getDate() < 10 ? '0' + new Date(timeStamp).getDate() : new Date(timeStamp).getDate()
      const hh = new Date(timeStamp).getHours() < 10 ? '0' + new Date(timeStamp).getHours() : new Date(timeStamp).getHours()
      const mm = new Date(timeStamp).getMinutes() < 10 ? '0' + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes()
      const ss = new Date(timeStamp).getSeconds() < 10 ? '0' + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds()
      var d = new Date(timeStamp).getDay()
      let day
      if (d === 0) {
        day = '日'
      } else if (d === 1) {
        day = '一'
      } else if (d === 2) {
        day = '二'
      } else if (d === 3) {
        day = '三'
      } else if (d === 4) {
        day = '四'
      } else if (d === 5) {
        day = '五'
      } else if (d === 6) {
        day = '六'
      }
      this.nowTime = year + '年' + month + '月' + date + '日' + '   ' + hh + ':' + mm + ':' + ss + '   ' + '星期' + day
    },
    nowTimes() {
      this.timeFormate(new Date())
      setInterval(this.nowTimes, 1000)
      this.clear()
    },
    clear() {
      clearInterval(this.nowTimes)
      this.nowTimes = null
    }
  }
}
</script>

<style lang="scss" scoped>
.tip {
  padding: 5px 10px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 10px;
  font-weight: bold;
    span{
      color: #f4645f;
    }
}
</style>
